import { defineComponent, ref } from "vue";
import { Button, DatePicker } from "vant";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import ButtonGroupView from "@/components/ButtonGroupView";
export default defineComponent({
  name: "",
  props: {
    value: {
      type: [String, Array],
      default: "",
    },
  },
  emits: ["change"],
  setup(props, { emit }) {
    const currentDate = ref(props.value);
    return () => {
      const data: IButtonGroupViewData[] = [
        {
          text: "重置",
          plain: true,
          type: "primary",
          onClick: () => emit("change", ""),
          childClass: "mr-[10px] !w-[150px]",
        },
        {
          text: "确认",
          type: "primary",
          childClass: "!w-[150px]",
          onClick: () =>
            emit("change", currentDate.value.toString().split(",").join("-")),
        },
      ];
      return (
        <div
          class="flex flex-col  px-[15px] pb-[10px]"
          style={{ borderRadius: "0px 0px 16px 16px" }}
        >
          <div class="h-[50px] flex items-center text-[12px]">时间日期</div>
          <DatePicker
            show-toolbar={false}
            columns-type={["year", "month", "day"]}
            v-model={currentDate.value}
            // class="h-[200px]"
          />
          <ButtonGroupView data={data} />
        </div>
      );
    };
  },
});
